<template>
  <div>
    <div class="mailbox">
      <div class="flex">
        <i :class="'el-icon-success c-success'" />
        <span class="mailbox-text">密码设置</span>
        <span>
          <div class="c-danger">
            <icon-svg icon-name="jinggao" />
            安全性高的密码可以使账户更安全，建议您定期更换密码。
          </div>
        </span>
      </div>
      <div class="button">
        <el-button type="text"
                   size="small"
                   @click="visible = true">
          修改
        </el-button>
      </div>
    </div>
    <change-password v-if="visible"
                     :phone-num="mobile"
                     :visible.sync="visible" />
  </div>
</template>

<script>
import ChangePassword from "./components/ChangePassword.vue";
export default {
  name: "UserAccountSecure",
  components: { ChangePassword },
  props: {
    value: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      visible: false,
    };
  },
  computed: {
    mobile () {
      return this.value?.mobile
    }
  }
};
</script>

<style scoped>
.mailbox {
  height: 70px;
  line-height: 70px;
  padding: 0 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
}
.c-danger {
  color: #f56c6c !important;
  padding-right: 10px;
  line-height: 40px;
}
.c-success {
  color: #67c23a !important;
  padding-right: 10px;
}
.mailbox-text {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  width: 80px;
}
.text-color {
  color: #ff3434;
}
.text-width {
  width: 120px;
}

.flex {
  display: flex;
  align-items: center;
}
</style>
